<template>
    <div>
        <!--查询表单-->
        <div class="search-div" style="margin-bottom: 10px;">
            <el-form label-width="70px" size="small">
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="审核类型">
                            <el-input style="width: 95%" v-model="searchObj.status"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="部署时间">
                            <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                                style="margin-right: 10px;width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>
        <!-- 历史任务列表 -->
        <el-dialog :title="history.title" :visible.sync="history.open" width="40%" append-to-body>
           <el-table :data="history.list">
             <el-table-column label="任务名称" prop="name"></el-table-column>
             <el-table-column label="开始时间" prop="startTime"></el-table-column>
             <el-table-column label="结束时间" prop="endTime"></el-table-column>
             <el-table-column label="耗时" prop="duration"></el-table-column>
             <el-table-column label="任务名称" prop="comment"></el-table-column>
           </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()" size="small" icon="el-icon-refresh-right">关闭</el-button>
            </span>
        </el-dialog>
         <!-- 查看进度 -->
         <el-dialog :title="process.title" :visible.sync="process.open" width="40%" append-to-body>
           <div v-html="process.data"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()" size="small" icon="el-icon-refresh-right">关闭</el-button>
            </span>
        </el-dialog>
        <!-- 流程审核 -->
        <el-dialog title="流程审核" :visible.sync="open" width="40%" append-to-body>
            <el-form ref="dataForm" :rules="rules" :model="form" label-width="150px" size="small"
                style="padding-right: 40px">
                <el-form-item label="审批意见" prop="passed" >
                    <el-select v-model="form.passed" placeholder="请选择审批意见">
                        <el-option label="同意" :value="true" />
                        <el-option label="拒绝" :value="false" />
                    </el-select>
                </el-form-item> 
                <el-form-item label="批注" prop="info" >
                    <el-input type="textarea" v-model="form.info" placeholder="请输入批注"></el-input>
                </el-form-item> 
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel()" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="submit()" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 表格 -->
        <el-table v-loading="listLoading" :data="list" stripe border
            style="width: 100%; margin-top: 10px">
            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="username" label="请假人名称" />
            <el-table-column prop="day" label="请假天数" />
            <el-table-column prop="startTime" label="开始时间" />
            <el-table-column prop="endTime" label="结束时间" />
            <el-table-column prop="userInfo" label="请假原因" show-overflow-tooltip />
            <el-table-column prop="info" label="审核备注" show-overflow-tooltip />

            <el-table-column prop="status" label="状态" width="160" :formatter="cidformatter" />
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="info" icon="el-icon-s-claim" size="mini" @click="handleAudit(scope.row)" title="审批" />
                    <el-button type="info" icon="el-icon-tickets" size="mini" @click="handleHistoryt(scope.row)"
                        title="审批历史" />
                    <el-button type="info" icon="el-icon-picture" size="mini" @click="handleProcess(scope.row)"
                        title="进度查看" />

                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center"
            layout="total, prev, pager, next, jumper" @current-change="fetchPageList" />



    </div>
</template>
  
<script>
// 导入
import api from "@/api/done/done.js";
import aapi from "@/api/auditInfo/auditInfo.js";


const defaultForm = {
    busUserOaId: '',
    passed: '',
    info: '',
}
export default {
    data() {
        return {
            list: [],
            page: 1,
            limit: 5,
            total: 0,
            searchObj: {},
            listLoading: false,
          
            history:{
                list:[],
                title:'审批历史',
                open: false
            },

            open:false,
            // 当前选中的对象
            current: {},

            createTimes: [],
            oaTimes: [],
            // 选中数组
            ids: [],
            // 是否允许开始审核
            startAudit: false,
            statusList: [
                { status: 0, name: "初始化" },
                { status: 1, name: "审核中" },
                { status: 2, name: "已拒绝" },
                { status: 3, name: "已批准" }
            ],

 
                    //进度图
                    process: {
                title: '进度图',
                open: false,
                data: null
            },

            //表单参数
            form: defaultForm,
            //表单效验
            rules: {
                passed: [
                    { required: true, message: '请选择是否通过', trigger: 'change' }
                ],
                info: [
                    { required: true, message: '请输入备注信息', trigger: 'blur' }
                ]
            },
        };
    },
    created() {
        //this.listLoading=true;
        this.fetchPageList();
    },
    methods: {

        handleProcess(row) {
            aapi.getProcess(row.instanceId).then(resp => {
                this.process.data = resp;
                this.process.open = true;
            })
        },

        handleHistoryt(row){
            aapi.listHistory(row.instanceId).then(resp =>{
                this.history.list = resp.data
                this.history.open = true;
            })
        },

        cidformatter(row) {
            let item = this.statusList.find(item => item.status === row.status);
            return item ? item.name : null;
        },

        // 取消按钮
        cancel() {
            this.dialogVisible = false;
            this.history.open = false;
            this.reset();
        },
        handleAudit(row) {
            this.reset();
            this.form.busUserOaId = row.id;
            this.open = true;
        },
        submit(){
            api.handleAudit(this.form).then(()=>{
                this.$message.success( '审批完成');
                this.fetchPageList();
                this.reset()
                this.open=false
            })
        },
        // 表单重置
        reset() {
            this.form = {
                auditId: null,
                passed: true,
                info: null
            };
        },

        resetData() {
            //1.清空搜索条件
            this.searchObj = {};
            //2.再次刷新列表
            this.fetchPageList();
        },
        fetchPageList(page = 1) {
            this.page = page;
            if (this.createTimes && this.createTimes.length == 2) {
                this.searchObj.createTimeBegin = this.createTimes[0];
                this.searchObj.createTimeEnd = this.createTimes[1];
            }
            api
                .getPageInfo(this.page, this.limit, this.searchObj)
                .then((response) => {
                    // this.listLoading=false;
                    console.log("列表: ", response.data.records);
                    this.list = response.data.records;
                    this.total = response.data.total;
                });
        },
    },
};
</script>
  
<style lang="less" scoped></style>